<template>
    <el-container>
        <el-header class="header-tabs">
            <el-tabs type="card" v-model="groupId" @tab-change="tabChange">
				<el-tab-pane label="收货明细" name="0"></el-tab-pane>
				<el-tab-pane label="订单收货汇总" name="1"></el-tab-pane>
			</el-tabs>
        </el-header>
        <el-header v-if="groupId == 0">
            <div class="right-panel-search">
               <el-input v-model="search.contract_no" placeholder="请输入合同单号" clearable @change="handleKeyDowns" />
                <el-input v-model="search.keyword" placeholder="请输入工厂货号/SKC/批次号" clearable @change="handleKeyDowns" />
                <el-button type="primary" icon="el-icon-search" @click="sendUpsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding" v-if="groupId == 0">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" show-summary>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed label="收货单号" align="center" width="160" sortable>
                    <template #default="{row}">
                        <div>{{row.deliver_no}}</div>
                        <div>{{row.create_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="发织合同单号" align="center" width="160" sortable>
                    <template #default="{row}">
                        <div>{{row.contract_no}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="商品信息" fixed align="center" width="300">
                    <template #default="{row}">
                        <div class="shopInfo" v-if="row.goods">
                            <el-image class="img" :src="row.goods.goods_image" :preview-src-list="row.goods.goods_image_item" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            <div class="right">
                                <div>工厂货号：{{row.contract.factory_number}}</div>
                                <div>批次号：{{row.contract.batch_number}}</div>
                                <div>SKC：{{row.contract.skc}}</div>
                                <div>商品品牌：{{row.brand_name}}</div>
                                <div>客户：{{row.custom_name}}</div>
                                <div>颜色：{{row.goods.colour}}</div>
                                <div v-if="row.sizeCate">商品类别：{{row.sizeCate.title}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="尺码" align="center">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.goods_size}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="收货明细" prop="total_count" align="center">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="此单合计" prop="total_count" align="center"></el-table-column>
                <el-table-column label="交货日期" prop="create_time" align="center" sortable width="150"></el-table-column>
                <el-table-column label="工序" prop="two_process_title" align="center" width="100">
                    <template #default="{row}">
                        {{row.contract.two_process_title}}
                    </template>
                </el-table-column>
                <el-table-column label="承制人" align="center" column-key="filterApply" :filters="chengFilters">
                    <template #default="{row}">
						<div>{{row.apply_name}}</div>
					</template>
                </el-table-column>
                <el-table-column label="单价" prop="price" align="center">
                    <template #default="{row}">
                        {{row.contract.price}}
                    </template>
                </el-table-column>
                <el-table-column label="单位" prop="unit_name" align="center">
                    <template #default="{row}">
                        {{row.contract.unit_name}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="110">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="receipt(scope.row, scope.$index)" v-auth="'secondsend.print'">打印收货单</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        <el-header v-if="groupId == 1">
            <div class="right-panel-search">
                <el-input v-model="search.keyword" placeholder="请输入合同号/工厂货号/批次号" @change="handleKeyDowns" />
                <el-button type="primary" icon="el-icon-search" @click="orderUpsearch">搜索</el-button>
                <el-button type="primary" @click="allCompleted" :disabled="selection.length==0">批量完工</el-button>
            </div>
        </el-header>
        <el-main class="nopadding" v-if="groupId == 1">
            <scTable ref="table" :apiObj="conList" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" show-summary>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed label="发织合同号" align="center" width="160" sortable>
                    <template #default="{row}">
                        <div>{{row.contract_no}}</div>
                        <div>{{row.create_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="商品信息" fixed prop="goods" align="center" width="300">
                    <template #default="{row}">
                        <div class="shopInfo" v-if="row.goods">
                            <el-image class="img" :src="row.goods.goods_image" :preview-src-list="row.goods.goods_image_item" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            <div class="right">
                                <div>工厂货号：{{row.factory_number}}</div>
                                <div>批次号：{{row.batch_number}}</div>
                                <div>SKC：{{row.skc}}</div>
                                <div>商品品牌：{{row.brand_name}}</div>
                                <div>客户：{{row.custom_name}}</div>
                                <div>颜色：{{row.goods.colour}}</div>
                                <div v-if="row.sizeCate">商品类别：{{row.sizeCate.title}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="尺码" align="center">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.goods_size}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="已发织数量" prop="total_weaving_count" align="center" width="100">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.weaving_num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="已收货数量" prop="received_count" align="center" width="100">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.received_num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="待收货数量" prop="to_be_received_count" align="center" width="100">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.to_be_received_num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单标签" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.order_label==1" type="danger">加急</el-tag>
                        <el-tag v-else type="success">正常</el-tag>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="针种" prop="needle_seed_title" align="center" width="100"></el-table-column>
                <el-table-column label="毛种" prop="wool_seed" align="center" width="100"></el-table-column> -->
                <el-table-column label="生产交期" prop="due_date" align="center" width="150" sortable>
                    <template #default="{row}">
                        <div :style="{ color: row.is_expire == 1 ? 'red' : ''}">{{row.due_date}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="发织日期" prop="contract_date" align="center" width="150" sortable></el-table-column>
                <el-table-column label="工序" prop="produce_process_name" align="center" width="100"></el-table-column>
                <el-table-column label="承制人" align="center" width="100" sortable prop="supplier_id" column-key="filterApply" :filters="chengFilters">
					<template #default="{row}">
						<div>{{row.apply_name}}</div>
					</template>
				</el-table-column>
				<el-table-column label="制单人" align="center" width="100" sortable prop="creator" column-key="filterCreate" :filters="zhiFilters">
                    <template #default="{row}">
						<div>{{row.creator_name}}</div>
					</template>
                </el-table-column>
                <el-table-column label="单价" prop="price" align="center" width="100"></el-table-column>
                <el-table-column label="完工" prop="is_completed" align="center" width="100">
                    <template #default="{row}">
                        <el-tag v-if="row.is_completed==1" type="success">是</el-tag>
                        <el-tag v-else type="danger">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="补扣款" prop="deduction_amount" align="center" width="100"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="90">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="showContract(scope.row, scope.$index)" v-auth="'secondsend.show'">查看明细</el-button>
                            <el-button text type="primary" size="small" @click="repairDeduct(scope.row, scope.$index)" v-auth="'secondsend.repairdeduct'">补扣款</el-button>
                            <!-- <el-popconfirm title="确定标为完工吗？" @confirm="completed(scope.row)">
                                <template #reference>
                                    <el-button text type="primary" size="small" v-auth="'secondsend.completed'">标为完工</el-button>
                                </template>
                            </el-popconfirm> -->
                            <el-popconfirm title="确定标为完工吗？" @confirm="completed(scope.row)" v-if="scope.row.is_completed==0">
								<template #reference>
									<el-button text type="success" size="small" v-auth="'secondsend.completed'">标为完工</el-button>
								</template>
							</el-popconfirm>
                            <el-popconfirm title="确定取消完工吗？" @confirm="unCompleted(scope.row)" v-if="scope.row.is_completed==1">
								<template #reference>
									<el-button text type="info" size="small" v-auth="'secondsend.uncompleted'">取消完工</el-button>
								</template>
							</el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        <repair-deduct v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></repair-deduct> <!--补扣款-->
        <con-list v-if="dialog.list" ref="listDialog" @success="handleSuccess" @closed="dialog.list = false" draggable :query="{contract_no:contract_no,process_id:7}"></con-list>  <!-- 查看明细 -->
        <print ref="pitDialog"></print>
        <receipt-print v-if="dialog.print" ref="printDialog" @success="handleSuccess" @closed="dialog.print = false" draggable></receipt-print>
    </el-container>
</template>
<script>
import Print from '@/views/order/print';
import RepairDeduct from './repairDeduct.vue';
import ConList from './conList.vue';
import ReceiptPrint from './receiptPrint.vue';

export default {
  components: {  Print, RepairDeduct, ConList, ReceiptPrint },
	name: 'user',
	data() {
		return {
            dialog:{
                save:false,
                scan:false,
                pit:false,
                list:false,
                repair:false,
                print:false,
            },
			group: [],
			apiObj: this.$API.produce.send.lists,
            conList:this.$API.produce.send.contractLists,
            query:{
                process_id:7,
            },
			selection: [],
            needleList:[],//针种
			search: {
				contract_no: null,
				factory_number: null,
				supplier_id: null,
				batch_number: null,
			},
            contract_no:"",
            groupId:"0",
            apply:[],
            chengFilters: [],
			zhiFilters: [],
            place:3
		}
	},
	mounted() {
        this.getCreate()
    },
	methods: {
        // 查看委外合同单
        showContract(row) {
            this.contract_no = row.contract_no
			this.dialog.list = true
			this.$nextTick(() => {
				this.$refs.listDialog.open('add').setData(row)
			})
		},
        receipt(row){
            console.log('row :>> ', row);
            this.dialog.print = true;
            setTimeout(()=>{
                this.$refs.printDialog.open("show");
            },500)
        },
        // 打印
        async print(row){
            var reqData = { contract_no_arr:row.contract_no };
            var res = await this.$API.print.loomBarcodePrint.get(reqData);
            if (res.code == 1) {
                this.$refs.pitDialog.init(res.data);
            } else {
                this.$alert(res.message, "提示", { type: "error" });
            }
        },
        // 补扣款
        repairDeduct(row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('add').setData(row)
            })
        },
		//标记完工
		async completed(row) {
			var reqData = { contract_no_arr: row.contract_no }
			var res = await this.$API.produce.send.markCompleted.post(reqData);
			if (res.code == 1) {
                this.$refs.table.refresh()
				this.$message.success("操作成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
        // 取消完工
        async unCompleted(row) {
			var reqData = {contract_no_arr: row.contract_no}
			var res = await this.$API.produce.send.unCompleted.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh()
				this.$message.success("操作成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
        // 批量完工
        async allCompleted(){
            var contract_no_arr = [];
            this.selection.map((item) => {
                contract_no_arr.push(item.contract_no)
            })
            this.$confirm(`确定完工选中的 ${this.selection.length} 项吗？`, '提示', {
                type: 'warning'
            }).then(() => {
                this.table_del_all(contract_no_arr)
            }).catch(() => {

            })
        },
        async table_del_all(contract_no_arr){
				var reqData = {contract_no_arr: contract_no_arr}
				var res = await this.$API.produce.send.markCompleted.post(reqData);
				if(res.code == 1){
					this.$refs.table.refresh()
					this.$message.success("操作成功")
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
		//搜索
		sendUpsearch() {
			this.$refs.table.upData(this.search)
		},
        orderUpsearch() {
			this.$refs.table.upData(this.search)
		},
        handleKeyDown() {
            this.sendUpsearch()
        },
        handleKeyDowns() {
            this.orderUpsearch()
        },
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        selectionChange(selection) {
			this.selection = selection;
		},
        tabChange(e){
            this.groupId = e
            for (const key in this.search) {
                this.search[key] = null;
            }
            if(e==0){
                this.place = 3
            }else{
                this.place = 2
            }
            this.getCreate()
            if(e==1){
                this.orderUpsearch()
            }else{
                this.sendUpsearch()
            }
        },
        // 下单人/制单人
        async getCreate() {
            var res = await this.$API.all.getProduceFilter.get({process_id:7,place:this.place});
			let b = []
			let c = []
            res.data.maintenance_creator.map(item => {
                b.push({
                    text: item.name,
                    value: item.id,
                })
            })
            res.data.supplier_list.map(item => {
                c.push({
                    text: item.name,
                    value: item.id,
                })
            })
			this.zhiFilters = b
			this.chengFilters = c
		},
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
</style>